﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3图像边框的应用</title>
        <style>
            div {
                text-align: center;
                border: 30px solid #09F;
                margin: 20px;
                padding: 20px;
                width: 320px;
            }
            .round {border-image: url(image/border.jpg) 30 30 round}
            .repeat {border-image: url(image/border.jpg) 30 30 repeat}
            .stretch {border-image: url(image/border.jpg) 30 30 stretch}
        </style>
    </head>
    <body>
        <h3>CSS3矩形阴影的应用</h3>
        <div>未定义border-image时的参照效果</div>
        <div class="repeat">border-image属性定义图像边框，图片为repeat</div>
        <div class="round">border-image属性定义图像边框，图片为round</div>
        <div class="stretch">border-image属性定义图像边框，图片为stretch</div>
    </body>
</html>